<template>

  <!-- 搜索条件 -->

  <div style="margin-top: 100px;margin-left: 30px">
    <label>商品分类编码:</label>
    <el-input
        v-model="code"
        size="large"
        style="width: 280px;margin-left: 20px;margin-right: 20px"
        placeholder="请输入"
    />

    <label>商品分类名称:</label>
    <el-input
        v-model="name"
        size="large"
        style="width: 280px;margin-left: 20px;margin-right: 20px"
        placeholder="请输入"
    />
    <el-button type="primary" @click="search"><el-icon><Search /></el-icon>&nbsp;&nbsp;查询</el-button>
  </div>

  <!-- 审核导入导出新增按钮 -->
  <div class="selection-toolbar" style="margin-top: 100px;margin-left: 20px">
    <el-space>
      <el-button  type="success" @click="add()">新增</el-button>
      <el-button  type="primary"><el-icon><Stamp /></el-icon>&nbsp;&nbsp;审核</el-button>
      <el-button type="primary">导出</el-button>
      <el-button type="primary">导出</el-button>
      <span>
          已选中 {{ selectedRows.length }} 条记录
        </span>
    </el-space>
  </div>

  <!-- 表格 -->

  <el-table :data="pageInfo.list" style="width: 100%;margin-top: 30px" border stripe @selection-change="handleSelectionChange">
    <el-table-column fixed type="selection" width="55" align="center" />
    <el-table-column label="序号" align="center">
      <template #default="scope">
        {{scope.$index+(pageNo-1)*pageSize+1}}
      </template>
    </el-table-column>
    <el-table-column prop="id" v-if="false"/>
    <el-table-column prop="code" label="商品分类编码" align="center"/>
    <el-table-column prop="name" label="商品分类名称" align="center"/>
    <el-table-column prop="parentName" label="所属商品分类" align="center"/>
    <el-table-column prop="createDate" label="创建时间" align="center"/>
    <el-table-column prop="createUser" label="创建人" align="center"/>
    <el-table-column prop="updateDate" label="更新时间" align="center"/>
    <el-table-column prop="updateUser" label="更新人" align="center"/>
    <el-table-column  label="操作" align="center">
      <template #default="scope">
        <el-button type="text" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="text" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


  <!-- 分页组件 -->

  <el-pagination
      v-model:current-page="pageNo" style="float: right;margin-top: 40px;margin-right: 130px"
      :page-size="pageSize"
      :background="true"
      layout="total,prev, pager, next"
      :total="pageInfo.total"
      @current-change="handleCurrentChange"
  />

  <!-- 弹窗显示 新增 -->
  <el-dialog
      title="新增商品分类"
      v-model="showAddDialog"
      width="40%"
      :before-close="handleDialogClose"
  >
    <Suspense>
    <AddGoodsCategory
        @submit-success="handleAddSuccess"
        @cancel="handleDialogClose"
    />
    </Suspense>
  </el-dialog>
  <!-- 编辑商品分类弹窗 -->
  <el-dialog
      title="编辑商品分类"
      v-model="showEditDialog"
      width="40%"
      :before-close="handleDialogClose"
  >
    <Suspense>
    <AddGoodsCategory
        :editId="currentEdit"
        @submit-success="handleEditSuccess"
        @cancel="handleDialogClose"
    />
    </Suspense>
  </el-dialog>

</template>

<script lang="ts" setup>
import { ref } from 'vue';
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import type {PageInfo} from "@/types/basic/pageInfo.ts";
import {useRouter} from "vue-router";
import AddCustomer from "@/basic-view/customer/AddCustomer.vue";
import type {Customer} from "@/types/public-xs/Customer.ts";
import AddGoodsCategory from "@/basic-view/goodsCategory/AddGoodsCategory.vue";
import request from "@/util/request.ts";

// 已选数据（保持原有代码）
const selectedRows = ref<any[]>([])

let currentEdit =ref(0)

let pageNo = ref(1)
let pageSize = ref(5)
let pageInfo = ref<PageInfo>({list: [], pageNo: 0, pageSize: 0, pages: 0, total: 0})
let total = ref(0)

let code = ref("")
let name = ref("")
let codeContent = ref("")
let nameContent = ref("")

const router = useRouter()

const showAddDialog = ref(false); // 新增弹窗
const showEditDialog = ref(false); // 编辑弹窗

let categoryArr = pageInfo.value.list.map(item =>{
  return
})




//获取数据
async function getList(pageNo: number) {
  try {
    let response = await request.post('basic/goodsCategory/getGoodsCategoryList', {
      pageNo: pageNo,
      pageSize: pageSize.value,
      code:codeContent.value,
      name:nameContent.value
    });
    // let response = await axios.post('http://localhost:8084/goodsCategory/getGoodsCategoryList', {
    //   pageNo: pageNo,
    //   pageSize: pageSize.value,
    //   code:codeContent.value,
    //   name:nameContent.value
    // });
    pageInfo.value = response.data.data;
    total.value = response.data.data.total;
    console.log(response.data);
  } catch (error) {
    ElMessage.error('获取商品分类数据失败');
    pageInfo.value.list = [];
    total.value = 0;
    console.error('获取数据失败:', error);
  }
}
const handleAddSuccess = () => {
  showAddDialog.value = false;
  getList(pageNo.value); // 刷新
};

const handleEditSuccess = () => {
  showEditDialog.value = false;
  getList(pageNo.value); // 刷新表格
};

const handleDialogClose = () => {
  ElMessageBox.confirm('确定关闭新增客户窗口？未保存的数据将丢失。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    showAddDialog.value = false; // 确认关闭
    showEditDialog.value = false;
  })
};


// 选择变化事件
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

// 页码改变
const handleCurrentChange = (page:number) => {
  pageNo.value = page
  getList(pageNo.value)
}

// 查询
const search = () => {
  nameContent.value = name.value
  codeContent.value = code.value
  getList(1)
}
//删除
async function del(id:number){

  let response1 = await request.get('basic/goodsCategory/getGoodsCategoryByParentId',{
    params:{
      parentId:id
    }
  } );

  // let response1 = await axios.get('http://localhost:8084/goodsCategory/getGoodsCategoryByParentId', {
  //   params:{
  //     parentId:id
  //   }
  // });
  if(response1.data.code=='200'){
    ElMessage.error('该商品分类下有子分类，不能删除')
    return
  }

  let response = await request.get('basic/goodsCategory/delGoodsCategory',{
    params:{
      id:id
    }
  } );

  // let response = await axios.get('http://localhost:8084/goodsCategory/delGoodsCategory', {
  //   params:{
  //     id:id
  //   }
  // });
  if(response.data.data){
    ElMessage.success('删除成功')
    pageNo.value=1
    await getList(pageNo.value)
  }else{
    ElMessage.error('删除失败')
  }
}

const add = ()=>{
  showAddDialog.value = true; // 打开新增弹窗
}

const edit = (id:any)=>{
  currentEdit = id
  showEditDialog.value = true; // 打开编辑弹窗
}


getList(1)
</script>
